<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab{
            width: 33%;
            border: solid 1px greenyellow;
            border-collapse: collapse;
        }

        .tab td{
            border: solid 1px greenyellow;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">

        <h2>{{info}}</h2>

        <!-- <div>
            <input type="text" v-model="info">
        </div> -->
        <!-- <ul>
            <li v-for="(s,i) in students">{{s}}</li>
        </ul> -->

        <form action="">
        <div>学号:<input type="text" v-model="std.f_id"></div>
        <div>姓名:<input type="text" v-model="std.f_name"></div>
        <div>性别:<input type="text" v-model="std.f_sex"></div>
        <div>生日:<input type="text" v-model="std.f_birthday"></div>
        <div>专业:<input type="text" v-model="std.f_major_id"></div>
    </form>
        <button @click="f2">添加</button>

       <table class="tab">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>生日</td>
                <td>专业</td>
            </tr>
            <tr v-for="s in arr">
             <td>{{s.f_id}}</td>
             <td>{{s.f_name}}</td>
             <td v-if="s.f_sex=='男'">先生</td>
             <td v-else>女士</td>
             <td>{{s.f_birthday}}</td>
             <td v-if="s.f_major_id==1">计算机</td>
             <td v-else-if="s.f_major_id==2">外语</td>
             <td v-else-if="s.f_major_id==3">会计</td>
             <td v-else>法律</td>
            </tr>
        </table>
        </div>
  <script src="js/vue.js"></script>
  <script>
    let vm=new Vue({
        el:'#app',
        data:{
            info:'哈哈哈 ',
            students:['嬴政','刘彻','李世民','赵匡胤'],
            arr:[],
            std:{f_id:1,f_name:'',f_sex:'',f_birthday:'',f_major_id:4}
        },
        //自定义方法
        
        methods:{
            f1(){
                this.arr.push({f_id:1,f_name:'嬴政',f_sex:'男',f_birthday:'1999-5-6',f_major_id:'1'},)
                this.arr.push({f_id:2,f_name:'刘彻',f_sex:'男',f_birthday:'1999-5-7',f_major_id:'2'},)
                this.arr.push({f_id:3,f_name:'李世民',f_sex:'男',f_birthday:'1999-5-8',f_major_id:'3'},)
                this.arr.push({f_id:4,f_name:'武则天',f_sex:'女',f_birthday:'1999-5-9',f_major_id:'4'},)
                
            },
            f2(){
                this.arr.push(this.std)
            }
        },
        //生命周期：创建阶段类似 load事件
        created() {
          this.f1()
        },
        
       
        
    })
  </script>
 </body>